<template>
   <!-- 加载图标样式23 -->
   <div class="loading"></div>
</template>

<script setup>

</script>

<style scoped lang='scss'>
.loading {
   animation: rotation 1s linear infinite;
   border: 3px solid #1678ff;
   border-radius: 50%;
   display: inline-block;
   height: 64px;
   position: relative;
   width: 64px
}

.loading:after,
.loading:before {
   background: #ff3d00;
   border-radius: 50%;
   content: "";
   height: 10px;
   left: 0;
   position: absolute;
   top: 0;
   transform: translate(120%, 120%);
   width: 10px
}

.loading:before {
   background: #ea4e3d;
   bottom: 0;
   left: auto;
   right: 0;
   top: auto;
   transform: translate(-120%, -120%)
}

.loading:after {
   background: #ffaa09
}

@keyframes rotation {
   0% {
      transform: rotate(0deg)
   }

   to {
      transform: rotate(1turn)
   }
}
</style>
